<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Animation</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!-- styles -->
    <link rel="stylesheet" href="../../css/global.css"/>
    <link rel="stylesheet" href="css/google-code-prettify.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/animate.css"/>

    <!--[if lt IE 9]>
    <script src="../../lib/js/html5.js"></script>
    <![endif]-->

    <!-- icons -->
    <link rel="icon" href="../../lib/image/favicon.ico"/>
    <link rel="shortcut icon" href="../../lib/image/favicon.ico"/>

</head>
<body>
<nav class="navbar">
    <div class="inner">
        <ul class="nav">
            <li>
                <a href="./index.html">Home</a>
            </li>
            <li>
                <a href="./transform.html">Transform</a>
            </li>
            <li>
                <a href="./transition.html">Transition</a>
            </li>
            <li class="active">
                <a href="./animation.html">Animation</a>
            </li>
            <!--<li>-->
            <!--<a href="./event/">Event</a>-->
            <!--</li>-->
            <!--<li>-->
            <!--<a href="./script/">Script</a>-->
            <!--</li>-->
        </ul>
        <a class="brand" href="../../">Nicole_Site</a>
    </div>
</nav>
<header class="overview subov">
    <div class="inner">
        <h1>CSS3 Animation</h1>
        <p>定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。</p>
    </div>
</header>
<div class="container">
    <div class="inner clearfix">
        <aside class="span2">
            <div class="aside">
                <ul class="aside-nav">
                    <li class="cur"><a href="#animation"><i class="icon-chevron-right"></i>animation</a></li>
                    <li><a href="#name"><i class="icon-chevron-right"></i>name</a></li>
                    <li><a href="#duration"><i class="icon-chevron-right"></i>duration</a></li>
                    <li><a href="#timeFunc"><i class="icon-chevron-right"></i>timing function</a></li>
                    <li><a href="#delay"><i class="icon-chevron-right"></i>delay</a></li>
                    <li><a href="#itaCount"><i class="icon-chevron-right"></i>iteration count</a></li>
                    <li><a href="#direction"><i class="icon-chevron-right"></i>direction</a></li>
                    <li><a href="#playState"><i class="icon-chevron-right"></i>play state</a></li>
                    <li><a href="#fillMode"><i class="icon-chevron-right"></i>fill mode</a></li>

                </ul>
            </div>
        </aside>
        <article class="span3">
            <section id="animation">
                <header class="page-header">
                    <h1>animation</h1>
                    <div class="explain">
                        <p>复合属性。检索或设置对象所应用的动画特效。</p>
                        <p>如果提供多组属性值，以逗号进行分隔。</p>
                        <p>对应的脚本特性为animation。</p>
                        
                    </div>
                    <div class="syntax">
                        <p>animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]*</p>
                    </div>
                </header>
                <pre class="prettyprint linenums sign">
    -webkit-animation: &lt;name&gt; &lt;duration&gt; &lt;timing-function&gt; &lt;delay&gt;
                       &lt;iteration-count&gt; &lt;direction&gt;
       -moz-animation: &lt;name&gt; &lt;duration&gt;,&lt;timing-function&gt; &lt;delay&gt;
                       &lt;iteration-count&gt; &lt;direction&gt;
        -ms-animation: &lt;name&gt; &lt;duration&gt;,&lt;timing-function&gt; &lt;delay&gt;
                       &lt;iteration-count&gt; &lt;direction&gt;
         -o-animation: &lt;name&gt; &lt;duration&gt;,&lt;timing-function&gt; &lt;delay&gt;
                       &lt;iteration-count&gt; &lt;direction&gt;
            animation: &lt;name&gt; &lt;duration&gt;,&lt;timing-function&gt; &lt;delay&gt;
                       &lt;iteration-count&gt; &lt;direction&gt;

    @-webkit-keyframes &lt;name&gt; { /* rules */}
       @-moz-keyframes &lt;name&gt; { /* rules */}
        @-ms-keyframes &lt;name&gt; { /* rules */}
         @-o-keyframes &lt;name&gt; { /* rules */}
            @keyframes &lt;name&gt; { /* rules */}</pre>
            </section>
            <section id="name">
                <header class="page-header">
                    <h1>name</h1>
                    <div class="explain">
                        <p>检索或设置对象所应用的动画名称，必须与规则<code>@keyframes</code>配合使用，因为动画名称由<code>@keyframes</code>定义。</p>
                        <p>如果提供多个属性值，以逗号进行分隔。</p>
                        <p>对应的脚本特性为animationName。</p>
                    </div>
                    <div class="syntax"><p>animation-name：none | &lt;identifier&gt; [ , none | &lt;identifier&gt; ]*</p></div>
                </header>
                    <div class="example">
                        <div class="anim anim-name node-duration">
                            <div class="node node-purple anim-flash">flash</div>
                            <div class="node node-blue anim-bounce">bounce</div>
                            <div class="node node-green anim-shake">shake</div>
                            <div class="node node-yellow anim-tada">tada</div>
                            <div class="node node-orange anim-swing">swing</div>
                            <div class="node node-red anim-wobble">wobble</div>
                            <div class="node node-red anim-wiggle">wiggle</div>
                            <div class="node node-orange anim-pulse">pulse</div>
                            <div class="node node-yellow anim-hinge">hinge</div>
                            <div class="node node-green anim-fadeInUp">fadeInUp</div>
                            <div class="node node-blue anim-rotateOut">rotateOut</div>
                            <div class="node node-purple anim-lightSpeedOut">lightSpeedOut</div>
                        </div>
                    </div>
                <pre class="prettyprint linenums sign">
                -webkit-animation-name: &lt;name&gt;
                   -moz-animation-name: &lt;name&gt;
                    -ms-animation-name: &lt;name&gt;
                     -o-animation-name: &lt;name&gt;
                        animation-name: &lt;name&gt;</pre>
            </section>

            <section id="duration">
                <header class="page-header">
                    <h1>duration</h1>
                    <div class="explain">
                        <p>检索或设置对象动画的持续时间.</p>
                        <p>如果提供多个属性值，以逗号进行分隔。</p>
                        <p>对应的脚本特性为animationDuration。</p>
                        <p>默认值：0。</p>
                    </div>
                    <div class="syntax"><p>animation-duration：&lt;time&gt; [ , &lt;time&gt; ]*/p></div>
                </header>
                <div class="alert yellow">通过设置相同的<code>animation-timing-function, animation-delay</code>，观察不同<code>animation-duration</code>的效果。</div>
                <div class="example">
                    <div class="anim anim-duration">
                        <div class="node node-purple duration-1">shake (duration:0.2s)</div>
                        <div class="node node-blue duration-2">shake (duration:0.5s)</div>
                        <div class="node node-green duration-3">shake (duration:1s)</div>
                        <div class="node node-yellow duration-4">shake (duration:2s)</div>
                        <div class="node node-orange duration-5">shake (duration:3s)</div>
                    </div>
                </div>
                <pre class="prettyprint linenums sign">
              /*  改变持续时间为 1s  */
               -webkit-animation-duration: 2s;
                  -moz-animation-duration: 2s;
                   -ms-animation-duration: 2s;
                    -o-animation-duration: 2s;
                       animation-duration: 2s;</pre>
            </section>
            <section id="timeFunc">
                <header class="page-header">
                    <h1>timing function</h1>
                    <div class="explain">
                        <p>指定对象的2D translation（2D平移）</p>
                        <p>第一个参数对应X轴，第二个参数对应Y轴</p>
                        <p>如果第二个参数未提供，则默认值为0</p>
                    </div>
                    <div class="syntax"><p>translate(&lt;length&gt;[, &lt;length&gt;]); translateX(&lt;length&gt;), translateY(&lt;length&gt;)</p></div>
                </header>
                <div class="alert yellow">通过设置相同的<code>animation-duration, animation-delay</code>，观察不同<code>animation-timing-function</code>的效果。</div>
                <div class="example">
                    <div class="anim anim-timeFunc node-duration">
                        <!--<div class="node node-brown"> </div>-->
                        <div class="node node-purple timeFunc-ease ">rotateOut (ease)</div>
                        <div class="node node-blue timeFunc-in "><span>rotateOut</span><span>(ease-in)</span></div>
                        <div class="node node-green timeFunc-out "><span>rotateOut</span><span>(ease-out)</span></div>
                        <div class="node node-yellow timeFunc-in-out "><span>rotateOut</span><span>(ease-in-out)</span></div>
                        <div class="node node-orange timeFunc-linear ">rotateOut (linear)</div>
                        <div class="node node-red timeFunc-bzr "><span>rotateOut</span><span>cubic-bezier</span><span>(0.2,0.6,0.8,0.4)</span></div>
                    </div>
                </div>
            <pre class="prettyprint linenums sign">
            -webkit-animation-timing-function: &lt;fn&gt;;
               -moz-animation-timing-function: &lt;fn&gt;;
                -ms-animation-timing-function: &lt;fn&gt;;
                 -o-animation-timing-function: &lt;fn&gt;;
                    animation-timing-function: &lt;fn&gt;;</pre>
            </section>

            <section id="delay">
                <header class="page-header">
                    <h1>delay</h1>
                    <div class="explain">
                        <p>检索或设置对象延迟过渡的时间。</p>
                        <p>如果提供多个属性值，以逗号进行分隔。</p>
                        <p>对应的脚本特性为animationDelay。</p>
                        <p>默认值：0。</p>
                    </div>
                    <div class="syntax"><p>animation-delay：&lt;time&gt;[ ,&lt;time&gt; ]*</p></div>
                </header>
                <div class="alert yellow">通过设置相同的<code>animation-timing-function, animation-duration</code>，观察不同<code>animation-delay</code>的效果。</div>
                <div class="example">
                    <div class="anim anim-delay  node-duration">
                        <!--<div class="node node-brown"> </div>-->
                        <div class="node node-purple delay-1 ">bounce (delay:0.2s)</div>
                        <div class="node node-blue delay-2 ">bounce (delay:0.5s)</div>
                        <div class="node node-green delay-3 ">bounce (delay:1s)</div>
                        <div class="node node-yellow delay-4 ">bounce (delay:2s)</div>
                        <div class="node node-orange delay-5 ">bounce (delay:3s)</div>
                    </div>
                </div>
            <pre class="prettyprint linenums sign">
            /*  设置延迟过渡的时间为 1s  */
            -webkit-animation-delay: 1s;
               -moz-animation-delay: 1s;
                -ms-animation-delay: 1s;
                 -o-animation-delay: 1s;
                    animation-delay: 1s;</pre>
            </section>

            <section id="itaCount">
                <header class="page-header">
                    <h1>iteration count</h1>
                    <div class="explain">
                        <p>检索或设置对象动画的循环次数.</p>
                        <p>如果提供多个属性值，以逗号进行分隔。</p>
                        <p>对应的脚本特性为animationIterationCount。</p>
                        <p>默认值：1，infinite表示无限循环，不能为负值.</p>
                    </div>
                    <div class="syntax"><p>animation-iteration-count：infinite | &lt;number&gt; [ , infinite | &lt;number&gt; ]*</p></div>
                </header>
                <!--<div class="example">-->

                <!--</div>-->
            <pre class="prettyprint linenums sign">
            -webkit-animation-iteration-count: infinite;
               -moz-animation-iteration-count: infinite;
                -ms-animation-iteration-count: infinite;
                 -o-animation-iteration-count: infinite;
                    animation-iteration-count: infinite;</pre>
            </section>

            <section id="direction">
                <header class="page-header">
                    <h1>direction</h1>
                    <div class="explain">
                        <p>检索或设置对象动画在循环中是否反向运动。</p>
                        <p>注意当动画处于反向运动时，对应的运动类型也会翻转。例如使用ease-in会变成ease-out。</p>
                        <p>对应的脚本特性为animationDirection。</p>
                        <p>normal：默认值，正常方向。</p>
                        <p>reverse：动画反向运行,方向始终与normal相反。</p>
                        <p>alternate：动画会循环正反方向交替运动，奇数次会正常运动，偶数次会反向运动，即所有相关联的值都会反向。</p>
                        <p>alternate-reverse：动画从反向开始，再正反方向交替运动，运动方向始终与alternate定义的相反。</p>
                    </div>
                    <div class="syntax"><p>animation-direction: normal | reverse | alternate | alternate-reverse [, normal | reverse | alternate | alternate-reverse ]*</p></div>
                </header>
                <div class="alert yellow">通过设置<code>animation-iteration-count:4, animation-timing-function:ease-in-out</code>,<br>观察连续6次动画中不同<code>animation-direction</code>的效果。</div>
                <div class="example">
                    <div class="anim anim-direction node-duration">
                        <div class="node node-blue direction-normal timeFunc-in-out ">normal</div>
                        <div class="node node-green direction-reverse timeFunc-in-out ">reverse</div>
                        <div class="node node-yellow direction-alternate timeFunc-in-out ">alternate</div>
                        <div class="node node-orange direction-alternate-reverse timeFunc-in-out ">alternate-reverse</div>
                    </div>
                </div>
            <pre class="prettyprint linenums sign">
            -webkit-animation-direction: reverse;
               -moz-animation-direction: reverse;
                -ms-animation-direction: reverse;
                 -o-animation-direction: reverse;
                    animation-direction: reverse;</pre>
            </section>

            <section id="playState">
                <header class="page-header">
                    <h1>play state</h1>
                    <div class="explain">
                        <p>检索或设置对象动画的状态</p>
                        <p>如果提供多个属性值，以逗号进行分隔。</p>
                        <p>对应的脚本特性为animationPlayState。</p>
                        <p>默认值为running。设置状态为paused能够使一个运动的动画暂停。再次设置状态为running会继续当前的动画，而无需重新执行动画。</p>
                    </div>
                    <div class="syntax"><p>aanimation-play-state：running | paused [ , running | paused ]*</p></div>
                </header>
                <div class="alert yellow">设置<code>animation-iteration-count:10</code>,鼠标放在滑块上的时候暂停运动。</div>
                <div class="example">
                    <div class="anim anim-play-state">
                        <div class="node node-brown pulse"></div>
                    </div>
                </div>
            <pre class="prettyprint linenums sign">
             -webkit-animation-play-state: paused;
                -moz-animation-play-state: paused;
                 -ms-animation-play-state: paused;
                  -o-animation-play-state: paused;
                     animation-play-state: paused;</pre>
            </section>

            <section id="fillMode">
                <header class="page-header">
                    <h1>fill mode</h1>
                    <div class="explain">
                        <p>检索或设置对象动画时间之外的状态</p>
                        <p>如果提供多个属性值，以逗号进行分隔。</p>
                        <p>对应的脚本特性为animationFillMode。</p>
                        <p>none：默认值。不设置对象动画之外的状态</p>
                        <p>forwards：结束后保持动画结束时的状态，但当animation-direction为0，则动画不执行，持续保持动画开始时的状态</p>
                        <p>backwards：结束后返回动画开始时的状态</p>
                        <p>both：结束后可遵循forwards和backwards两个规则</p>
                    </div>
                    <div class="syntax"><p>animation-fill-mode：none | forwards | backwards | both [ , none | forwards | backwards | both ]*</p></div>
                </header>
                <div class="example">
                    <div class="anim anim-fill-mode node-duration">
                        <div class="node node-blue">none</div>
                        <div class="node node-green mode-forwards">forwards</div>
                        <div class="node node-yellow mode-backwards">backwards</div>
                        <div class="node node-orange mode-both">both</div>
                    </div>
                </div>
            <pre class="prettyprint linenums sign">
            -webkit-animation-fill-mode: forwards;
               -moz-animation-fill-mode: forwards;
                -ms-animation-fill-mode: forwards;
                 -o-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;</pre>
            </section>
        </article>
    </div>
</div>
<footer class="footer">
    <div class="inner">Copyright © myspace-nicolesite.rhcloud.com All Rights Reserved.
        <a href="http://weibo.com/magicdemo">@Ning_Wong</a>
    </div>
</footer>

<!-- javascript -->
<script src="../../lib/js/jquery-1.9.0.min.js"></script>
<script src="js/affix.js"></script>
<script src="js/google-code-prettify.js"></script>
<script type="text/javascript">
    (function($){
        window.prettyPrint && prettyPrint();
    })(window.jQuery)
</script>

</body>
</html>